<template>
  <div>
    <!-- <el-card class="mb20">
      <area-form ref="areaForm" @search="handleSearch" />
    </el-card>-->
    <el-card>
      <div style="text-align: right">
        <el-tooltip class="item" content="新增区域" effect="dark" placement="top">
          <el-button
            size="small"
            class="mb10"
            icon="el-icon-plus"
            type="primary"
            @click="handleEdit(false)"
          />
        </el-tooltip>
      </div>
      <el-row :gutter="8">
        <el-col :span="5">
          <el-input
            class="mb20"
            placeholder="请输入区域名称"
            clearable
            v-model="area"
            @input="handleInput"
          />
          <x-tree
            ref="xTree"
            :defaultExpandAll="true"
            :treeData="treeData"
            @changeTree="handleChangeTree"
          />
        </el-col>
        <el-col :span="19">
          <area-table
            @setTree="handleSetTree"
            ref="departmentTable"
            @refresh="handleRefresh"
            @edit="handleEdit"
          />
        </el-col>
      </el-row>
      <area-modal ref="areaModal" @refresh="handleRefresh" />
    </el-card>
  </div>
</template>

<script>
// import AreaForm from './AreaForm'
import AreaTable from './AreaTable'
import AreaModal from './AreaModal'
import XTree from '@/components/XTree'
import { getAreaTree } from '@/api/department'

export default {
  components: {
    // AreaForm,
    AreaTable,
    AreaModal,
    XTree
  },
  name: 'DepartmentIndex',
  data() {
    return {
      area: null,
      treeData: [],
      selectObj: {},
      saveTreeData: []
    }
  },
  mounted() {
    this.getAreaTree()
  },
  methods: {
    handleInput(e) {
      console.log('e', e)
      let arr = []
      if (e) {
        arr = this.treeData[0].children.filter(v => v.title.indexOf(e) != -1)
      } else {
        arr = [...this.saveTreeData]
      }
      this.treeData = [
        {
          title: '区域',
          key: '',
          value: '',
          children: arr
        }
      ]
    },
    handleSetTree(row) {
      this.$refs.xTree.getKeys([row.parentId])
      this.handleChangeTree(row)
    },
    getAreaTree() {
      getAreaTree().then(res => {
        console.log('res', res)
        let arr = [
          {
            title: '区域',
            key: '',
            value: '',
            children: res.data
          }
        ]
        this.treeData = arr
        this.saveTreeData = [...res.data]
      })
    },
    handleChangeTree(obj) {
      this.selectObj = obj
      this.$refs.departmentTable.getId(obj)
    },
    // 编辑
    handleEdit(bool, record) {
      if (!bool) {
        if (this.selectObj.parentId !== '') {
          this.$refs.areaModal.edit(bool, this.selectObj)
        } else {
          this.$refs.areaModal.edit(bool, {})
        }
      } else {
        if (this.selectObj.parentId !== '') {
          this.$refs.areaModal.edit(true, { ...record, ...this.selectObj })
        } else {
          this.$refs.areaModal.edit(true, record)
        }
      }
    },
    handleSearch(param) {
      this.$refs.departmentTable.handleGetList(param)
    },
    // 刷新
    handleRefresh() {
      this.$refs.departmentTable.handleGetList()
      this.getAreaTree()
    }
  }
}
</script>
